import React from 'react'
import _ from 'underscore'
import View from 'lib/View.jsx'
import RootScope from './RootScope.es6'
import Card from 'lib/components/card.jsx'
import ChartWidget from 'lib/components/ChartWidget.jsx'
import GridWidget from 'lib/components/GridWidget.jsx'
import format from 'lib/util/format'
import addWidgetMixin from '../common/NewDashboardWidget.jsx'
import tips from '../common/indicator-tips.jsx'

import Resizable from 'lib/components/Resizable.jsx';
import AutoSizeLink from './AutoSizeLink.jsx';

var traceCols = [{
  title:'请求名称',
  key:'url',
  render:function(fmtVal,rowData){
    return (
      <AutoSizeLink fmtVal={ fmtVal } rowData={ rowData } styles={{
        maxWidth: 300,
        display: 'inline-block',
        whiteSpace: 'nowrap'
      }} attrs={{
        'data-tip': fmtVal,
        'data-place': 'right'
      }} />
    )
  }
},{
  title:'响应时间',
  key:'totalTime',
  containerStyle: {
    whiteSpace: 'nowrap'
  },
  sortable:true,
  formatter:format.numSecond
},{
  title:'请求时间',
  key:'timestamp',
  containerStyle: {
    whiteSpace: 'nowrap'
  },
  sortable:true,
  formatter:format.stampToTime
}]

export default class RootView extends View {
  constructor(props){
    super(props);
  }

  resizeHandler(current) {
    if (this.__width !== current.width) {
      this.__width = current.width;
      if (this.__timer) {
        clearTimeout(this.__timer);
      }
      this.__timer = setTimeout(() => {
        this.__timer = null;
        this.forceUpdate();
      }, 30);
    }
  } // resizeHandler

  render(){
    if (this.__timer) {
      clearTimeout(this.__timer);
    }
    return (
      <div>
        <div className="box">
          <Card title={
              <span>
                响应时间
                <i className="iconfont" data-tip={tips.http_resp}>&#xe663;</i>
              </span>
            } extra={
              addWidgetMixin(this.scope.chart0Api,'响应时间')
            }>
            <ChartWidget store={this.state.chart0}/>
          </Card>
        </div>
        <div className="box">
          <Card title={
              <span>
                吞吐量
                <i className="iconfont" data-tip={tips.http_thp}>&#xe663;</i>
              </span>
            } extra={
              addWidgetMixin(this.scope.chart1Api,'吞吐量')
            }>
            <ChartWidget store={this.state.chart1}/>
          </Card>
        </div>
        <Resizable className="box" useLoadFire={ false } onResize={ this.resizeHandler.bind(this) }>
          <Card title={
            <span>
              慢请求 Trace
              <i className="iconfont" data-tip={tips.http_slow_trace}>&#xe663;</i>
            </span>
          }>
            <GridWidget store={this.state.grid} cols={traceCols}/>
          </Card>
        </Resizable>
      </div>
    )
  }
}

RootView.defaultProps = {
  Scope:RootScope
}
